<template>
	<view class="logistics">
		<view class="query">
			<view class="btn_add" v-if="type==1" @click="handleAdd(1)">新增报价</view>
			<view class="btn_add" v-if="type==2&&type_data == 1" @click="handleAdd(1)">新增成交价</view>
		</view>
		<view class="content" v-if="type == 2" @click="handleAdd(default_final)">
			<view class="content-item">
				<view class="row">
					<view class="row-label">创建时间</view>
					<view class="row-value">{{ default_final.createtime || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">成交价</view>
					<view class="row-value">￥{{ default_final.money||0}}</view>
				</view>
				<view class="row" v-if="type == 2&&type_data == 0">
					<view class="row-label">质保时间</view>
					<view class="row-value">{{ default_final.qa_time || '' }}</view>
				</view>
			</view>
		</view>
		<view class="" v-if="type == 2&&type_data == 0" style="margin: 0 0 20rpx 10rpx;">
			修改记录
		</view>
		<view class="content">
			<view v-for="(item, index) in dataList" :key="index" class="content-item">
				<view class="row">
					<view class="row-label">创建时间</view>
					<view class="row-value">{{ item.createtime || "" }}</view>
				</view>
				<view class="row">
					<view class="row-label">{{type==1?'报价':'成交价'}}</view>
					<view class="row-value">￥{{ item.money||0}}</view>
				</view>
				<view class="row" v-if="type==1">
					<view class="row-label">报价说明</view>
					<view class="row-value">{{ item.remarks || "-" }}</view>
				</view>
				<view class="row" v-if="type!=1&&type_data == 0">
					<view class="row-label">质保时间</view>
					<view class="row-value">{{ item.qa_time || '' }}</view>
				</view>
				<view class="row" v-if="type==1&&item.image.length!=0">
					<view class="row-label">图片</view>
					<view class="row-value">
						<image v-for="(img, k) in item.image" :key="k" :src="img" @click="preview(k, item.image)" />
					</view>
				</view>
			</view>
		</view>
		<empty v-if="dataList.length == 0" />
	</view>
</template>

<script>
	import empty from "@/components/empty.vue";
	export default {
		components: {
			empty,
		},
		data() {
			return {
				dataList: [],
				last_page: 1,
				queryParams: {
					page: 1,
				},
				type_data: 0,
				type: 1,
				id: null,
				default_final: null
			};
		},
		onLoad(e) {
			this.type = e.type
			this.id = e.id
			this.type_data = e.type_data
			// this.getList()
			uni.setNavigationBarTitle({
				title: this.type == 1 ? '报价' : "成交价"
			})
		},
		onShow() {
			this.dataList = []
			this.getList()
		},
		methods: {
			// 获取数据列表
			getList() {
				let url = this.type == 1 ? "/warranty/offer_log" : '/warranty/final_list'
				this.$https.post(url, {
					warranty_id: this.id
				}).then((res) => {
					// this.last_page = res.data.last_page;
					if (this.type == 1) {
						let list = res.data;
						list.forEach((i) => {
							if (i.image) {
								i.image = i.image.split(",");
							} else {
								i.image = [];
							}
						});
						this.dataList = this.dataList.concat(list);
					} else {
						this.default_final = res.data.default_final
						this.dataList = res.data.final_log
					}
					console.log(this.default_final, '000000000000')
				});
			},
			// 预览图片
			preview(current, urls) {
				uni.previewImage({
					current,
					urls,
				});
			},
			// 
			handleAdd(default_final) {
				if (default_final == 1) {
					uni.navigateTo({
						url: `/pages/detail/addPrice?type=${this.type}&id=${this.id}&type_data=${this.type_data}`
					});
				} else {
					console.log(default_final, '维修---------')
					// 维修
					if(this.type_data == 0){
						uni.navigateTo({
							url: `/pages/detail/addPrice?type=${this.type}&id=${this.id}&default_final=${JSON.stringify(default_final)}&type_data=${this.type_data}`
						});
					}
				}
			},
			// 筛选
			handleFilter() {
				this.$refs.filterRef.open();
			},
		},
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page = this.queryParams.page + 1;
				this.getList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.logistics {
		background-color: #f7f8fb;
		padding: 0 32rpx 18rpx;
		min-height: 100vh;

		.query {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
			position: sticky;
			top: 0;
			z-index: 9;
			background-color: #f7f8fb;
			padding: 10rpx;
			font-size: 26rpx;

			.btn_add {
				margin: 10rpx 0;
				padding: 12rpx 20rpx;
				background-color: #409eff;
				border-radius: 50rpx;
			}
		}

		.content {
			&-item {
				box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.05);
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;

				.row {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					line-height: 50rpx;

					&-label {
						color: #969699;
						width: 136rpx;
					}

					&-value {
						color: #303030;
						flex: 1;
						word-break: break-all;

						image {
							width: 120rpx;
							height: 120rpx;
							margin: 10rpx 20rpx 0 0;
						}
					}
				}
			}
		}
	}
</style>